<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="hammer.js"></script>
	<script type="text/javascript" src="swipeout.js"></script>
	<script>
	$(document).ready(function(){
		new SwipeOut(mylist, {btnText: "Remove"}); 
		
		$("#mylist li").on("delete", function(evt) {
				alert("you called me ");
		});
	});
	</script>
	<style>
	#mylist{background:gray;color:white;width:400px;margin:0 auto;}
	#mylist li{padding:10px 0 10px 0; border:1px solid white;}
    .swipe-out .delete-btn {
  padding: 6px 8px;
  border-radius: 6px;
  border: solid 1px rgb(96,23,18);
  background-image: linear-gradient(top, rgb(242,153,157), rgb(213,62,41));
  background-image: -webkit-linear-gradient(top, rgb(242,153,157), rgb(213,62,41));
  background-image: -moz-linear-gradient(top, rgb(242,153,157), rgb(213,62,41));
  background-image: -o-linear-gradient(top, rgb(242,153,157), rgb(213,62,41));
  text-shadow: 0em -0.1em rgb(51,51,51);
  color: #fff;
  font: bold 14px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
	</style>
	
</head>

<body>
<ul id="mylist">
	<li>number one
	</li>
	<li>number two
	</li>
	<li>number three
	</li>
	<li>number four
	</li>
	<li>number five
	</li>
	<li>number six
	</li>
</ul>
</body>
</html>